<template>
  <div class="card-container">
    <span class="title">{{title}}</span>
    <slot></slot>
  </div>
</template>

<style rel="stylesheet/scss" lang="scss" scoped>
  .card-container {
    position: relative;
    border: 1px solid #ebeef5;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    border-radius: 4px;
    color: #303133;
    padding:20px;
    .title {
      position: absolute;
      left: 20px;
      top: -10px;
      padding: 0 15px;
      font-size: 18px;
      color: #333;
      font-size: bold;
      background-color: #fff;
    }
    > div {
      margin: 30px 0;
    }
  }
</style>

<script>
  export default {
    name: 'CustomCard',
    props: {
      title: {
        type: String,
        default: 'Title'
      }
    }
  }
</script>
